var WinMan = function ( dest_div, css )
{
	this._css = ( css ? css : '' );

	this._dest_div = $el ( dest_div );
	this.windows = [];

	// Source win of event
	this._source = null;

	// Event mode (move or resize)
	this._mode;

	// Start of event
	this._start_x = null;
	this._start_y = null;

	// Semi-trasparent proxy object for move/resize
	this._proxy = document.createElement ( 'div' );
	this._proxy.className = 'liwe-window-proxy';

	liwe.dom.hide ( this._proxy );

	var self = this;

	liwe.events.add ( this._dest_div, 'mouseup', function ()
	{
		if ( ! self._source ) return;

		var x = parseInt ( self._proxy.style.left, 10 );
		var y = parseInt ( self._proxy.style.top, 10 );
		var width = parseInt ( self._proxy.style.width, 10 );
		var height = parseInt ( self._proxy.style.height, 10 );

		self._source.move ( x, y );
		self._source.resize ( width, height );

		self.move_to_top ( self._source );

		self._source = null;

		liwe.dom.del_class ( self._proxy, 'liwe-window-proxy-moving' );
		liwe.dom.hide ( self._proxy );
	} );

	liwe.events.add ( this._dest_div, 'mousemove', function ( ev )
	{
		if ( ! self._source ) return;

		liwe.dom.add_class ( self._proxy, 'liwe-window-proxy-moving' );

		ev.stopPropagation ();
		ev.preventDefault ();

		switch ( self._mode )
		{
			case 'drag':
				var dx = self._source.x + ( ev.clientX - self._start_x );
				var dy = self._source.y + ( ev.clientY - self._start_y );
				Win.move ( self._proxy, dx, dy );
				break;

			case 'resize':
				var width = self._source.width + ( ev.clientX - self._start_x );
				var height = self._source.height + ( ev.clientY - self._start_y );
				width = Math.max ( width, 100 );
				height = Math.max ( height, 100 );
				Win.resize ( self._proxy, width, height );
				break;
		}
	} );
};

WinMan._id = 1;
WinMan.get_id = function ()
{
	return 'win-' + ( WinMan._id ++ );
};

WinMan.prototype.move_to_top = function ( win )
{
	this.windows.iterate ( function ( w ) { w.set_zindex ( '' ); } );
	win.set_zindex ( 50 );
};

WinMan.prototype.set_drag = function ( win, x, y )
{
	this.set_mode ( 'drag', win, x, y );
};

WinMan.prototype.set_resize = function ( win, x, y )
{
	this.set_mode ( 'resize', win, x, y );
};

WinMan.prototype.set_mode = function ( mode, win, x, y )
{
	this._mode = mode;

	this._source = win;
	this._start_x = x;
	this._start_y = y;

	Win.move ( this._proxy, win.x, win.y );
	Win.resize ( this._proxy, win.width, win.height );

	liwe.dom.show ( this._proxy );
};

WinMan.prototype.get_workspace = function ()
{
	return this._dest_div;
};

WinMan.prototype.add = function ( win )
{
	win.set_wm ( this );
	this.windows.push ( win );
};

WinMan.prototype.render = function ()
{
	this._dest_div.appendChild ( this._proxy );
	liwe.dom.add_class ( this._dest_div, 'liwe-window-manager' );
	liwe.dom.add_class ( this._dest_div, this._css );
	this.windows.iterate ( function ( w ) { w.render (); } );
};

var Win = function ( props )
{
	if ( ! props ) props = {};

	this.id = props.get ( 'id', WinMan.get_id () );
	this.x = props.get ( 'x', 0 );
	this.y = props.get ( 'y', 0 );
	this.width = props.get ( 'width', 100 );
	this.height = props.get ( 'height', 100 );
	this.title = props.get ( 'title', '(no title)' );
};

Win.move = function ( div, x, y )
{
	div.style.left = x + 'px';
	div.style.top = y + 'px';
};

Win.resize = function ( div, w, h )
{
	div.style.width = w + 'px';
	div.style.height = h + 'px';
};

Win.prototype.move = function ( x, y )
{
	this.x = x;
	this.y = y;
	Win.move ( this._div, x, y );
};

Win.prototype.resize = function ( w, h )
{
	this.width = w;
	this.height = h;
	Win.resize ( this._div, w, h );
};

Win.prototype.set_wm = function ( wm )
{
	this.wm = wm;
	this._container = wm.get_workspace ();
};

Win.prototype.set_zindex = function ( zindex )
{
	this._div.style.zIndex = zindex;
};

Win.prototype.render = function ()
{
	this._div = document.createElement ( 'div' );

	this._titlebar = document.createElement ( 'div' );

	// Title text
	this._title = document.createElement ( 'span' );
	liwe.dom.add_class ( this._title, 'liwe-window-title' );
	this._titlebar.appendChild ( this._title );

	// Close button
	this._close = document.createElement ( 'div' );
	liwe.dom.add_class ( this._close, 'liwe-window-close' );
	this._close.innerHTML = '&times;';
	this._titlebar.appendChild ( this._close );

	liwe.dom.add_class ( this._titlebar, 'liwe-window-titlebar' );
	this._div.appendChild ( this._titlebar );

	// Content
	this._content = document.createElement ( 'div' );
	liwe.dom.add_class ( this._content, 'liwe-window-content' );
	this._div.appendChild ( this._content );

	// Statusbar
	this._statusbar = document.createElement ( 'div' );
	liwe.dom.add_class ( this._statusbar, 'liwe-window-statusbar' );

	this._resizer = document.createElement ( 'div' );
	liwe.dom.add_class ( this._resizer, 'liwe-window-resizer' );
	this._statusbar.appendChild ( this._resizer );

	this._div.appendChild ( this._statusbar );

	liwe.dom.add_class ( this._div, 'liwe-window' );
	this._container.appendChild ( this._div );

	this._init_events ();
	
	this.refresh ();
};

Win.prototype._init_events = function ()
{
	var self = this;
	liwe.events.add ( this._close, 'mousedown', function ( ev ) { ev.stopPropagation (); } );
	liwe.events.add ( this._close, 'mouseup', function ( ev ) { ev.stopPropagation (); } );
	liwe.events.add ( this._close, 'click', function ()
	{
		console.debug ( 'CLOSE' );
	} );

	liwe.events.add ( this._titlebar, 'mousedown', function ( ev )
	{
		self.wm.set_drag ( self, ev.clientX, ev.clientY );
	} );

	liwe.events.add ( this._resizer, 'mousedown', function ( ev )
	{
		self.wm.set_resize ( self, ev.clientX, ev.clientY );
	} );
};

Win.prototype.refresh = function ()
{
	Win.move ( this._div, this.x, this.y );
	Win.resize ( this._div, this.width, this.height );
	
	this._title.innerHTML = this.title;
};
